<template>
	<view>
		<u-navbar title=" " :autoBack="true" placeholder>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view style="padding: 0 32rpx;">
				<view style="height: 16rpx;"></view>
				<view class="story-detail-title">{{detail.name}}</view>
				<view style="height: 32rpx;"></view>
				<u--image @click="previewImg" mode="aspectFill" :src="detail.imgSrc" width="100%" height="200"></u--image>
				<view style="height: 16rpx;"></view>
				<u-parse :content="detail.remark"></u-parse>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['detail']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		methods: {
			// 预览图片
			previewImg() {
				let urls = this.detail.image.split(',');
				uni.previewImage({
					current: 0,
					urls,
				});
			},
		}
	}
</script>

<style>
	
</style>

<style lang="scss" scoped>
	.story-detail-title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}
	
</style>
